<template>
  <AxiomBottomSheet
    :visible="visible"
    @update:visible="$emit('update:visible', $event)"
  >
    <div class="axiom-time-sheet">
      <!-- Header -->
      <div class="header">
        <AxiomButton
          size="small"
          type="primary"
          @click="handleClear"
          class="btn-clear"
        >
          清空
        </AxiomButton>
        
        <AxiomTitle
          :title="title"
          type="component"
          level="3"
          class="sheet-title"
        />
        
        <AxiomButton
          size="small"
          @click="$emit('update:visible', false)"
          class="btn-close"
        >
          <AxiomIcon name="Close" size="16" />
        </AxiomButton>
      </div>
      
      <!-- Time Display -->
      <div class="time-display">
        <div class="time-value">{{ formatTime(selectedHour, selectedMinute) }}</div>
      </div>
      
      <!-- Wheel Picker -->
      <div class="wheel-picker">
        <div class="wheel-column">
          <div class="wheel-header">{{ String(selectedHour).padStart(2, '0') }}时</div>
          <div class="wheel-scroll">
            <div 
              v-for="hour in hours" 
              :key="hour"
              :class="['wheel-item', { active: hour === selectedHour }]"
              @click="selectedHour = hour"
            >
              {{ String(hour).padStart(2, '0') }}时
            </div>
          </div>
        </div>
        
        <div class="wheel-column">
          <div class="wheel-header">{{ String(selectedMinute).padStart(2, '0') }}分</div>
          <div class="wheel-scroll">
            <div 
              v-for="minute in minutes" 
              :key="minute"
              :class="['wheel-item', { active: minute === selectedMinute }]"
              @click="selectedMinute = minute"
            >
              {{ String(minute).padStart(2, '0') }}分
            </div>
          </div>
        </div>
      </div>
      
      <!-- Footer Button -->
      <div class="footer">
        <AxiomButton
          type="primary"
          size="large"
          @click="handleConfirm"
          class="confirm-button"
        >
          确定
        </AxiomButton>
      </div>
    </div>
  </AxiomBottomSheet>
</template>

<script>
import { ref, watch } from 'vue';
import AxiomBottomSheet from './AxiomBottomSheet.vue';
import AxiomButton from '../common/AxiomButton.vue';
import AxiomTitle from '../common/AxiomTitle.vue';
import AxiomIcon from '../common/AxiomIcon.vue';

export default {
  name: 'AxiomTimeSheet',
  components: {
    AxiomBottomSheet,
    AxiomButton,
    AxiomTitle,
    AxiomIcon
  },
  props: {
    visible: Boolean,
    title: { type: String, default: '选择时间' },
    modelValue: String
  },
  emits: ['update:visible', 'update:modelValue', 'confirm'],
  setup(props, { emit }) {
    const currentHour = new Date().getHours();
    const currentMinute = new Date().getMinutes();
    const hours = ref(Array.from({ length: 24 }, (_, i) => i));
    const minutes = ref(Array.from({ length: 60 }, (_, i) => i));
    const selectedHour = ref(currentHour);
    const selectedMinute = ref(currentMinute);

    const initializeValues = () => {
      if (props.modelValue) {
        const [hourStr, minuteStr] = props.modelValue.split(':');
        const hour = parseInt(hourStr, 10);
        const minute = parseInt(minuteStr, 10);
        if (!isNaN(hour) && !isNaN(minute)) {
          selectedHour.value = hour;
          selectedMinute.value = minute;
        }
      } else {
        selectedHour.value = currentHour;
        selectedMinute.value = currentMinute;
      }
    };
    watch(() => props.modelValue, initializeValues, { immediate: true });

    const formatTime = (hour, minute) => `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;

    const handleConfirm = () => {
      const result = formatTime(selectedHour.value, selectedMinute.value);
      emit('update:modelValue', result);
      emit('confirm', result);
      emit('update:visible', false);
    };

    const handleClear = () => {
        emit('update:modelValue', '');
        emit('confirm', '');
    };
    
    return {
      hours,
      minutes,
      selectedHour,
      selectedMinute,
      formatTime,
      handleConfirm,
      handleClear,
    };
  }
};
</script>

<style lang="scss">
@use '../../styles/components/mobile/axiom-time-sheet';
</style> 